<template>
  <div class="list-wrap">
    <a-typography-title class="block-title" :heading="6">
      {{ $t('cardList.tab.title.content') }}
    </a-typography-title>
    <a-row class="list-row" :gutter="24">
      <a-col
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
        class="list-col"
      >
        <div class="card-wrap empty-wrap">
          <a-card :bordered="false" hoverable @click="newTeam">
            <a-result :status="null" :title="$t('cardList.content.action')">
              <template #icon>
                <icon-plus style="font-size: 20px" />
              </template>
            </a-result>
          </a-card>
        </div>
      </a-col>
      <a-col
        v-for="item in renderData_new"
        :loading="loading"
        :key="item.title"
        class="list-col"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
      >
        <CardWrap
          
          :title="item.title"
          :id = "item.id"
          :description="item.description"
          
          :action-type="item.actionType"
          :icon="item.icon"
          :open-txt="$t('cardList.content.inspection')"
          :close-txt="$t('cardList.content.delete')"
          :show-tag="false"
        >
          <a-descriptions
            style="margin-top: 16px"
            :data="item.data"
            layout="inline-horizontal"
            :column="2"
          />
          <template #skeleton>
            <a-skeleton :animation="true">
              <a-skeleton-line
                :widths="['50%', '50%', '100%', '40%']"
                :rows="4"
              />
              <a-skeleton-line :widths="['40%']" :rows="1" />
            </a-skeleton>
          </template>
        </CardWrap>
      </a-col>
    </a-row>

    <template>
      <a-button @click="handleClick">Open Modal</a-button>
      <a-modal width="auto" v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
        <template #title>
          创建新团队
        </template>
        <div>
          <a-form :model="form" :style="{width:'600px'}" @submit="handleSubmit">
            <a-form-item field="name" label="团队名称">
              <a-input v-model="form.name" placeholder="请输入团队名称" />
            </a-form-item>
            <a-form-item field="post" label="描述">
              <!-- <a-input v-model="form.text" placeholder="请输入团队描述" /> -->
                <a-space direction="vertical" size="large" style="width: 100%">
                  <a-textarea v-model="form.text" placeholder="请输入团队描述" :max-length="30" allow-clear show-word-limit />
                </a-space>
            </a-form-item>
            <a-form-item field="isRead">
              <a-checkbox v-model="form.isPublic">
                是否公开
              </a-checkbox>
            </a-form-item>
            <a-form-item>
              <a-button html-type="submit">确认创建</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { queryInspectionList, ServiceRecord } from '@/api/list';

  import CardWrap from './card-wrap.vue';
  import { ref,reactive, onBeforeMount, onMounted } from 'vue';

  import { removeMyInterceptor } from "@/api/interceptor";
  import axios from "axios";
import useLoading from '../../../../hooks/loading';

let isLoading = true;

  removeMyInterceptor();

  let renderData:any;
  var item:any;
  let renderData_new : ServiceRecord[] =reactive([]); 
    

  const { loading, setLoading } = useLoading(isLoading);
  axios({
    method: 'post',           /* 指明请求方式，可以是 get 或 post */
    url: 'team/viewAllTeam',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
    data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
      role:2,
      userID:localStorage.getItem('id')
    })
  }).then((res)=>{
    console.log('mbmbmbmmbmbbbbbbbb')
    console.log(res)
      renderData = res.data.data
      console.log(renderData)

        
    for(item in renderData){

    console.log(renderData[item])
    const new_item = {
      title: renderData[item].teamName,
      name: 'quality',
      id: renderData[item].id,
      description: renderData[item].createTime,
      data:[
        {
          label:'成员数',
          value:renderData[item].memberCnt
        }
      ]
    }
    renderData_new.push(new_item);
  }

      setLoading(false);
  });



      
      const visible = ref(false);

      const handleClick = () => {
        visible.value = true;
      };
      const handleOk = () => {
        visible.value = false;
      };
      const handleCancel = () => {
        visible.value = false;
       
      };
      const form = reactive({
      name: '',
      text: '',
      isPublic: false,
    })
    const handleSubmit = (data:any) => {
      console.log(data);
      let isPrivate = 1;
      if(form.isPublic){
        isPrivate = 0;
      }
      let id = localStorage.getItem('id');
      removeMyInterceptor();
      axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: 'team/createTeam',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          userID:id,
          teamName:form.name,
          isPrivate: isPrivate
        })
      }).then(function (response) {
        console.log('请求成功');
        console.log(response);
        if (response.data.code === 0) {
          console.log('成功创建团队');
          // let new_item:ServiceRecord = {};
          const  new_item = {
                title: form.name,
                name: 'quality',
                id: 9,
                description: form.text,
                data:[
                  {
                    label:'成员数',
                    value:'1人'
                  }
                ]
              }
              // renderData_new.push(new_item);
               renderData_new.push(new_item);
        } else {
          console.log('失败');
        }
      }).catch(function () {
        console.log('请求失败');
      });

    }

  const newTeam = () =>{
    visible.value = true;

    
  }

</script>



<style scoped lang="less">
  .card-wrap {
    height: 100%;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    &:hover {
      transform: translateY(-4px);
    }
    :deep(.arco-card-meta-description) {
      color: rgb(var(--gray-6));
      .arco-descriptions-item-label-inline {
        font-weight: normal;
        font-size: 12px;
        color: rgb(var(--gray-6));
      }
      .arco-descriptions-item-value-inline {
        color: rgb(var(--gray-8));
      }
    }
  }
  .empty-wrap {
    height: 200px;
    border-radius: 4px;
    :deep(.arco-card) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      .arco-result-title {
        color: rgb(var(--gray-6));
      }
    }
  }
</style>
